<template>
    <div class="home">
        <my-head
                @loginOut="loginOut"
                @search="search"
                :userName="userName"
        >
        </my-head>
        <my-sidebar></my-sidebar>

        <div class="content">
            <router-view v-slot="{ Component }">
                <component :is="Component" />
            </router-view>
        </div>
    </div>
</template>

<script>
    import MyHead from '../components/commons/Header';
    import MySidebar from '../components/commons/Sidebar';
    import dataOperate from '@/services';

    import { useStore } from 'vuex';
    import { useRouter } from 'vue-router';
    import { computed } from 'vue';

    export default {
        name: "Home",
        components:{
            MyHead,
            MySidebar
        },
        setup() {
            const store = useStore(),
                  state = store.state,
                  router = useRouter();

            const loginOut = () => {
                dataOperate(store, 'login', {name: ''});
                router.push('/login');
                console.log(state.userData)

            }

            const search = (searchValue) => {
                dataOperate(store, 'getSearchData', searchValue);
                // console.log(state.courseData)
            }

            return {
                loginOut,
                userName: computed(() => state.userData.name),
                search
            }
        }

    }
</script>

<style lang="scss" scoped>
 .home {
     position: relative;
     width: 100%;
     height: 100%;

     .content {
         padding: 10px 0 0 210px;
         position: relative;
     }
 }
</style>